<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>getJSON获取数据</title>
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#divframe {
				border: 1px solid #999;
				width: 500px;
				margin: 0 auto;
			}

			.loadTitle {
				background: #fff;
				height: 30px;
				margin-top: 10px;
				margin-left: 10px;
			}
		</style>
		<script type="text/javascript">
			$(function() {
				$("#btn").click(function() {
					$.getJSON("data.js", function(data) {
						var $jsontip = $("#jsonTip");
						var strHtml = "123"; //存储数据的变量
						$jsontip.empty(); //清空内容
						$.each(data, function(infoIndex, info) {
							strHtml += "姓名：" + info["name"] + "<br>";
							strHtml += "性别：" + info["sex"] + "<br>";
							strHtml += "邮箱：" + info["email"] + "<br>";
							strHtml += "<hr>"
						})
						$jsontip.html(strHtml); //显示处理后的数据
					})
				})
			})
		</script>
	</head>
	<body>
		<div id="divframe">
			<div class="loadTitle">
				<input type="button" value="获取数据" id="btn" />
			</div>
			<div id="jsonTip"> </div>
		</div>
	</body>
</html>
